<template>
  <div>
    <h2 style="text-align: center;">发布新课程</h2>

    <el-steps :active="2" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="最终发布"/>
    </el-steps>
    <!--章节信息-->
    <el-card>

      <el-button type="primary" @click="addChapterDialog" style="margin-right: 1200px" size="small">添加章节</el-button>
      <el-table
          border
          style="width:100%"
          :data="chapterList"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table
                :data="props.row.episode_list"
                border
                style="width:100%">
              <el-table-column type="index"></el-table-column>
              <el-table-column
                  prop="title"
                  label="集名">
              </el-table-column>
              <el-table-column
                  prop="create_time"
                  label="上架时间">
              </el-table-column>

              <el-table-column
                  prop="level"
                  label="操作"
              >
                <template slot-scope="scope">
                  <el-button type="primary" icon="el-icon-edit" size='small' @click="editEpisodelist(scope.row)">编辑</el-button>
                  <el-button type="danger" icon="el-icon-delete" size='small' @click="removeEpisode(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>

        </el-table-column>
        <el-table-column type="index"></el-table-column>
        <el-table-column
            prop="title"
            label="章名">
        </el-table-column>
        <el-table-column
            prop="create_time"
            label="上架时间">
        </el-table-column>

        <el-table-column
            prop="level"
            label="操作"
        >
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size='small' @click="AddEpisodeDialog(scope.row.id)">添加小节</el-button>
            <el-button type="primary" icon="el-icon-edit" size='small' @click="editChapterlist(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size='small' @click="removeChapter(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加章dialog对话框 -->
    <el-dialog
        align="left"
        title="添加章信息"
        :visible.sync="addChapterVisible"
        width="50%"
        @close="closeAddEpisodeDialog"
        top="30vh"
    >
      <!--主体部分 -->
      <el-form
          :model="addChapterForm"
          status-icon
          :rules="addChapterFormRul"
          ref="addChapterFormRel"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="章标题" prop="title">
          <el-input
              v-model="addChapterForm.title"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="ordered">
          <el-input-number
              v-model="addChapterForm.ordered"
              controls-position="right"
              @change="handleChange" :min="1" :max="10">
          </el-input-number>
        </el-form-item>
        <el-form-item label="上架时间"  prop="create_time">
          <el-col :span="3">
            <el-date-picker
                v-model="addChapterForm.create_time"
                type="datetime"
                placeholder="选择日期"
                align="right"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addChapterVisible = false">取 消</el-button>
        <el-button type="primary" @click="addChapter">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加集dialog对话框 -->
    <el-dialog
        align="left"
        title="添加集信息"
        :visible.sync="addEpisodeVisible"
        width="50%"
        @close="closeAddchapterDialog"
        top="30vh"
    >
      <!--主体部分 -->
      <el-form
          :model="addEpisodeForm"
          status-icon
          :rules="addEpisodeFormRul"
          ref="addEpisodeFormRel"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="集标题" prop="title" style="width: 400px">
          <el-input
              v-model="addEpisodeForm.title"
              autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="排序" prop="ordered" style="width: 200px">
          <el-input-number
              v-model="addEpisodeForm.ordered"
              controls-position="right"
              @change="handleChange" :min="1" :max="10">
          </el-input-number>
        </el-form-item>
        <el-form-item label="上架时间"  prop="create_time">
          <el-col :span="3">
            <el-date-picker
                v-model="addEpisodeForm.create_time"
                type="datetime"
                placeholder="选择日期"
                align="right"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="上传视频" prop="play_url">
          <el-upload
              class="upload-demo"
              action="http://localhost:8089/api/v1/pub/video/getPlayUrl"
              :on-success="handleSuccess"
              v-model="addEpisodeForm.play_url"
              >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传.mp4文件，且不超过500Mb</div>
          </el-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeAddEpisodeDialog">取 消</el-button>
        <el-button type="primary" @click="addEpisode" >确 定</el-button>
      </span>
    </el-dialog>
    <el-form style="margin-top: 30px;margin-right: 1000px">
      <el-form-item>
        <el-button  type="primary" @click="next" >保存并下一步</el-button>
      </el-form-item>
    </el-form>
    <!-- 编辑章diaolog对话框 -->
    <el-dialog align="left" title="修改章信息" :visible.sync="editChapterVisible" width="50%">
      <!--主体部分 -->
      <el-form label-width="150px"
               :model="chapterInfo">
        <el-form-item label="章标题" prop="title">
          <el-input
              v-model="chapterInfo.title"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="ordered">
          <el-input-number
              v-model="chapterInfo.ordered"
              controls-position="right"
              @change="handleChange" :min="1" :max="10">
          </el-input-number>
        </el-form-item>
        <el-form-item label="上架时间"  prop="create_time">
          <el-col :span="3">
            <el-date-picker
                v-model="chapterInfo.create_time"
                type="datetime"
                placeholder="选择日期"
                align="right"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-col>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
      		<el-button @click="editChapterVisible = false">取 消</el-button>
      		<el-button type="primary" @click="editChapter">确 定</el-button>
      	</span>
    </el-dialog>

    <!-- 编辑集diaolog对话框 -->
    <el-dialog align="left" title="修改集信息" :visible.sync="editEpisodeVisible" width="50%">
      <!--主体部分 -->
      <el-form label-width="150px"
               :model="episodeInfo">
        <el-form-item label="集标题" prop="title" style="width: 400px">
          <el-input
              v-model="episodeInfo.title"
              autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="排序" prop="ordered" style="width: 200px">
          <el-input-number
              v-model="episodeInfo.ordered"
              controls-position="right"
              @change="handleChange" :min="1" :max="10">
          </el-input-number>
        </el-form-item>
        <el-form-item label="上架时间"  prop="create_time">
          <el-col :span="3">
            <el-date-picker
                v-model="episodeInfo.create_time"
                type="datetime"
                placeholder="选择日期"
                align="right"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="上传视频" prop="play_url">
          <el-upload
              class="upload-demo"
              action="http://localhost:8089/api/v1/pub/video/getPlayUrl"
              :on-success="handleSuccess"
              v-model="episodeInfo.play_url"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传.mp4文件，且不超过500Mb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      		<el-button @click="editEpisodeVisible = false">取 消</el-button>
      		<el-button type="primary" @click="editEpisode">确 定</el-button>
      	</span>
    </el-dialog>


  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        videoId:0,
      },
      chapterList:[],
      addChapterVisible:false,
      addEpisodeVisible:false,
      addChapterForm:{
        video_id: 0,
        title:'',
        ordered:'',
        create_time:''
      },
      addEpisodeForm:{
        title:'',
        play_url:'',
        ordered:'',
        video_id: 0,
        chapter_id:0,
        create_time:''
      },
      //添加章规则
      addChapterFormRul: {
        title: [
          {
            required: true,
            message: "请输入章标题",
            trigger: "blur",
          },
        ],
      },
      //添加集规则
      addEpisodeFormRul: {
        title: [
          {
            required: true,
            message: "请输入集标题",
            trigger: "blur",
          },
        ],
      },
      url:'',
      //章参数
      chapterInfo: {
        title: '',
        ordered: '',
        create_time:'',
        id:''
      },
      //集参数
      episodeInfo: {
        title: '',
        ordered: '',
        play_url: '',
        create_time:'',
        id:''
      },
      //修改dialog,控制显示隐藏
      editChapterVisible: false,
      editEpisodeVisible: false,
      dialogImageUrl: '',
      dialogVisible: false,
    }
  },

  methods: {
    //删除章
    removeChapter(id){
      this.$http.delete(`api/v1/pub/video/removeChapter/${id}`).then((res) => {
        console.log(res);
        if(res.data.code!==0) return this.$message.error("删除失败");
        this.$message.success("删除已选章节成功");
        //刷新列表
        this.getChapterList();
      });
    },
    //删除集
    removeEpisode(id){
      this.$http.delete(`api/v1/pub/video/removeEpisode/${id}`).then((res) => {
        console.log(res);
        if(res.data.code!==0) return this.$message.error("删除失败");
        this.$message.success("删除已选集成功");
        //刷新列表
        this.getChapterList();
      });
    },
    //点击确定发送请求修改章
    editChapter(){
      this.$http.put("api/v1/pub/video/editChapter",this.chapterInfo).then(res=>{
        // console.log(res);
        if(res.data.code!==0) return this.$message.error("修改课程基本信息失败");
        this.$message.success("修改课程基本信息成功");
        this.getChapterList();
        this.editChapterVisible = !this.editChapterVisible;
      })
    },
    //点击确定发送请求修改集
    editEpisode(){
      this.$http.put("api/v1/pub/video/editEpisode",this.episodeInfo).then(res=>{
        // console.log(res);
        if(res.data.code!==0) return this.$message.error("修改课程基本信息失败");
        this.$message.success("修改课程基本信息成功");
        this.getChapterList();
        this.editEpisodeVisible = !this.editEpisodeVisible;
      })
    },
    //编辑章事件
    editChapterlist(item) {
      this.editChapterVisible = !this.editChapterVisible;
      this.chapterInfo = {
        title: item.title,
        ordered: item.ordered,
        id: item.id,
        create_time: item.create_time
      }
    },
    //编辑集事件
    editEpisodelist(item) {
      this.editEpisodeVisible = !this.editEpisodeVisible;
      this.episodeInfo = {
        title: item.title,
        ordered: item.ordered,
        play_url: item.play_url,
        create_time: item.create_time,
        id:item.id
      }
    },
    previous(){
      this.$router.push({path:'/course/info'})
    },
    next(){
      this.$router.push({path:'/course/episode/1'})
    },
    getChapterList(){
      this.$http.get("api/v1/pub/video/queryChaEpiByVideoId",{
        params: this.queryInfo
      }).then((res)=>{
        console.log(res);
        this.chapterList=res.data.data;
      })
    },
    addChapterDialog(){
      this.addChapterVisible=!this.addChapterVisible
    },
    closeAddchapterDialog(){
      this.addChapterVisible=false
      //  重置表单
      this.$refs.addChapterFormRel.resetFields();
    },
    AddEpisodeDialog(id){
      this.addEpisodeForm.chapter_id=id;
      this.addEpisodeVisible=!this.addEpisodeVisible
    },
    closeAddEpisodeDialog(){
      this.addEpisodeVisible=false
    //  重置表单
      this.$refs.addEpisodeFormRel.resetFields();
    },
    addChapter(){
      this.addChapterForm.video_id=this.$route.params.id;
      console.log(this.addChapterForm.video_id);
      this.$http.post("http://localhost:8089/api/v1/pub/video/addChapter",this.addChapterForm).then(res=>{
        console.log(res);
        if (res.data.code==0){
          this.$message.success("添加成功")
          this.closeAddchapterDialog()
          this.getChapterList()
        }else {
          this.$message.error("添加失败")
          this.closeAddchapterDialog()
          this.getChapterList()
        }
      })
    },
    addEpisode(){
      this.addEpisodeForm.video_id=this.$route.params.id;
      this.$http.post("http://localhost:8089/api/v1/pub/video/addEpisode",this.addEpisodeForm).then(res=>{
        console.log(res)
        if (res.data.code==0){
          this.$message.success("添加成功")
          this.closeAddEpisodeDialog()
          this.getChapterList()
        }else {
          this.$message.error("添加失败")
          this.closeAddEpisodeDialog()
          this.getChapterList()
        }
      })

    },
    //排序
    handleChange(value) {
      console.log(value);
    },

    handleSuccess(response){
      console.log(response)
      this.url=((response.data[0].playURL).split("?"))[0];
      this.episodeInfo.play_url=this.url
    }

  },

  mounted() {
    //获取路由的id值
    if(this.$route.params && this.$route.params.id) {
      console.log(this.$route.params.id)
      this.queryInfo.videoId = this.$route.params.id;
      this.getChapterList();
    }
  },
}
</script>

<style>

</style>